<script setup lang="ts">
import { useAppStore } from '@/stores/app'

const { getImageUrl } = useAppStore()

interface Project {
    id: number | string
    title: string
    desc: string
    create_time: string
    click: number
    image?: string
    status?: string
}

interface Props {
    item: Project
}

const props = withDefaults(
    defineProps<{
        item: any
    }>(),
    {
        item: {}
    }
)
</script>

<template>
    <navigator :url="`/pages/demand_detail/demand_detail?id=${item.id}`">
        <view class="projects-card flex bg-white px-[20rpx] py-[32rpx]">
            <view class="mr-[20rpx] project-image" v-if="item.images">
                <view class="project-cate">{{ item.cate_name }}</view>
                <u-image
                    :src="getImageUrl(item.images)"
                    width="250"
                    height="250"
                    border-radius="16"
                >
                </u-image>
                <view class="project-hits">浏览量：{{ item.hits }}</view>
            </view>
            <view class="projects-card-content flex flex-col justify-between flex-1">
                <view class="projects-card-content-title text-base font-bold">{{ item.title }}</view>
                <view class="projects-card-content-likes">
                     <image
                            src="../static/images/icon/likes.png"
                            class="w-[24rpx] h-[24rpx] mr-[10rpx]"
                        ></image>点赞({{ item.likes }})
                </view>
                <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
                    <view>发布时间：{{ item.create_time }}</view>
                </view>
                <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
                    <view>村单位名：{{ item.village_name }}</view>
                </view>
                <view class="text-muted text-xs w-full flex justify-between mt-[12rpx]">
                    <view class="flex tel-icon">
                        <image
                            src="../static/images/icon/tel-24.png"
                            class="w-[24rpx] h-[24rpx] mr-[10rpx]"
                        ></image>
                        {{ item.contact }}
                    </view>
                </view>
            </view>
        </view>
    </navigator>
</template>

<style lang="scss" scoped>
.projects-card {
    border-radius: 16rpx;
    margin: 20rpx;
    position: relative;

    .project-image {
        position: relative;
    }

    .project-cate {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: #1e88f8; /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-top-left-radius: 16rpx; /* 圆角与卡片一致 */
        border-bottom-right-radius: 16rpx;
        font-size: 22rpx;
    }

    .project-hits {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 10; /* 提高z-index确保在图片上方 */
        background-color: rgba(0, 0, 0, 0.4); /* 添加背景色提高可读性 */
        color: white; /* 设置文字颜色 */
        padding: 5rpx 10rpx; /* 添加内边距 */
        border-bottom-right-radius: 16rpx; /* 圆角与卡片一致 */
        border-top-left-radius: 16rpx;
        font-size: 22rpx;
    }

    .tel-icon {
        background-color: #c00000;
        border-radius: 18rpx;
        color: white;
        align-items: center;
        padding: 5rpx 20rpx;
    }

    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-bottom: 20rpx;
            font-size: 30rpx;
            color: #222222;
        }

        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        &-likes {
            font-size: 24rpx;
            color: #1e88f8;
        }
    }
}
</style>
